import { defineConfig } from 'vite-plugin-windicss'
import colors from 'windicss/colors'

export default defineConfig({
  attributify: {
    prefix: 'w:'
  },
  theme: {
    colors: {
      ...colors,
      primary: '#4673EE',
      bg: 'rgba(13, 252, 255, 1)'
    },
    fontFamily: {
      fantasy: ['fantasy']
    }
  },
  alias: {
    hstack: 'flex items-center',
    vstack: 'flex flex-col',
    icon: 'w-6 h-6 fill-current',
    app: 'text-red',
    'app-border': 'border-gray-200 dark:border-dark-300',
  },
  shortcuts: {
    container: 'w-full px-7.5px',
    'absolute-x-center': 'absolute left-1/2 transform -translate-x-1/2',
    'absolute-y-center': 'absolute top-1/2 transform -translate-y-1/2',
    'absolute-center': 'absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2',
    'absolute-full': 'absolute top-0 left-0 right-0 bottom-0',
    'bg': 'bg-center bg-no-repeat bg-cover',
    'on-top': 'absolute top-0 left-0',
    'flc': 'flex justify-center items-center',
    'card-shandow': {
      background: 'rgba(163, 174, 203, 0.2)',
      'backdrop-filter': 'blur(16px)',
      '-webkit-backdrop-filter': 'blur(16px)',
      'border-radius': '1.066667vw',
      boxShadow: '-1px -1px 0.5px rgba(255, 255, 255, 0.6) inset, 1px 1px 0.5px rgba(178, 178, 178, 0.3) inset',
      'background-attachment': 'fixed'
    },
    'components-bg': {
      background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)'
    },
    btn: {
      '&:active': {
        opacity: '0.6',
        transition: 'all 0.1s'
      }
    },
    scroll: {
      'overflow-y': 'auto',
      '&::-webkit-scrollbar': {
        width: '2.5px',
        height: '2.5px'
      },
      '&::-webkit-scrollbar-thumb': {
        'border-radius': '2px',
        background: 'rgba(74, 122, 251, 1)'
      },
      '&::-webkit-scrollbar-track': {
        'border-radius': '2px',
        background: 'rgba(255, 255, 255, 0.25)'
      }
    }
  },
  extract: {
    include: [
      'index.html',
      'src/**/*.{vue,html,jsx,tsx}',
    ],
    exclude: [
      'node_modules/**/*',
      '.git/**/*',
    ],
  },
})
